<template>
  <px-dialog v-model="visible" title="查看" @close="cancel">
    <px-descriptions v-loading="loading" :column="2" border>
      <px-descriptions-item label="证照类型">
        {{ dataInfo?.twoName }}
      </px-descriptions-item>
      <px-descriptions-item label="科室">
        {{ className }}
      </px-descriptions-item>
      <px-descriptions-item label="证照名称">
        {{ dataInfo?.threeName }}
      </px-descriptions-item>
      <px-descriptions-item label="颁证机构">
        {{ dataInfo?.certificationAgency }}
      </px-descriptions-item>
      <px-descriptions-item label="颁证日期">
        {{ dataInfo?.certificationDate }}
      </px-descriptions-item>
      <px-descriptions-item label="有效期至">
        {{ dataInfo?.certificationDateValid }}
      </px-descriptions-item>
      <px-descriptions-item label="办证时长(天)">
        {{ dataInfo?.certificationDealDate }}
      </px-descriptions-item>
      <px-descriptions-item v-if="activeTab.categoryType === 'DEVICE'" label="设备编码">
        {{ dataInfo?.deviceCode }}
      </px-descriptions-item>
      <px-descriptions-item v-if="activeTab.categoryType === 'DEVICE'" label="设备名称">
        {{ dataInfo?.deviceName }}
      </px-descriptions-item>
      <px-descriptions-item v-if="activeTab.categoryType === 'CERTIFICATE'" label="持证人">
        {{ dataInfo?.holder }}
      </px-descriptions-item>
      <px-descriptions-item v-if="activeTab.categoryType === 'CERTIFICATE'" label="组织">
        {{ dataInfo?.organization }}
      </px-descriptions-item>
      <px-descriptions-item v-if="activeTab.categoryType === 'CERTIFICATE'" label="手机号">
        {{ dataInfo?.phone }}
      </px-descriptions-item>
      <px-descriptions-item v-if="activeTab.categoryType === 'CERTIFICATE'" label="身份证号">
        {{ dataInfo?.idCard }}
      </px-descriptions-item>
      <px-descriptions-item label="备注" width="200">
        {{ dataInfo?.remark }}
      </px-descriptions-item>
      <px-descriptions-item label="证照附件">
        <FileUpload fileType="view" :allowType="allowType" :fileData="{ moduleName: 'eqp' }" :fileList="dataInfo?.fileList" :isPreview="isPreview" />
      </px-descriptions-item>
    </px-descriptions>
  </px-dialog>
</template>

<script setup>
import { computed, ref, reactive, toRefs, onMounted } from "vue";
import { queryFileList } from "@/api/knowledge/certificate";
import FileUpload from "@/components/Upload/FileUpload.vue";

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  activeTab: {
    type: Object,
    default: () => {}
  },
  className: {
    type: String,
    default: ""
  },
  rowData: {
    type: Object,
    default: () => {}
  }
});
const emits = defineEmits(["update:visible"]);

const visible = computed({
  get: () => props.visible,
  set: val => emits("update:visible", val)
});

const state = reactive({
  loading: false,
  dataInfo: {
    fileList: []
  }
});
const { loading, dataInfo } = toRefs(state);
const isPreview = ref(true);
const allowType = ref(["txt", "pdf", "png", "jpg", "jpeg", "mp4"]);
onMounted(() => {
  editSearch();
});

// 查询证照信息
const editSearch = async () => {
  try {
    state.loading = true;
    const res = props?.rowData;
    state.dataInfo = res;
    const resFile = await queryFileList({ ids: res?.files });
    state.dataInfo.fileList = resFile?.length ? resFile : [];
  } catch (err) {
    console.log(err);
  } finally {
    state.loading = false;
  }
};

const cancel = () => {
  emits("update:visible", false);
};
</script>

<style lang="scss" scoped>
:deep(.px-descriptions__cell .px-descriptions__label .is-bordered-label) {
  width: 120px;
}

.table-img {
  width: 100px;
  height: 100px;
}
</style>
